<template>
  <div class="plan-time-picker-container">
    <!-- 年 -->
    <a-date-picker
      v-if="type == 1"
      mode="year"
      format="YYYY"
      valueFormat="YYYY"
      :value="value"
      @panelChange="yearPick"
      @openChange="yearStatus"
      :open="isopen"
      :placeholder="disabled ? '' : '选择年份'"
      :allowClear="allowClear"
      :disabled="disabled"
      class="year-picker"
      @change="handleChange($event, 1)"
    />
    <!-- 月 -->
    <a-month-picker
      v-if="type == 2"
      class="month-picker"
      format="YYYY-MM"
      valueFormat="YYYY-MM"
      :placeholder="disabled ? '' : '请选择月份'"
      :value="value"
      :allowClear="allowClear"
      :disabled="disabled"
      @change="handleChange($event, 2)"
    />
    <!-- 周 -->
    <a-week-picker
      v-if="type == 3"
      class="week-picker"
      valueFormat="YYYY-w"
      format="YYYY-wo"
      :placeholder="disabled ? '' : '请选择周'"
      :value="value"
      :allowClear="allowClear"
      :disabled="disabled"
      @change="handleChange($event, 3)"
    />

    <!-- 年月日 -->
    <a-date-picker
      v-if="type == 4"
      format="YYYY-MM-DD"
      valueFormat="YYYY-MM-DD"
      :placeholder="disabled ? '' : '请选择日期'"
      :value="value"
      :allowClear="allowClear"
      :disabled="disabled"
      @change="handleChange($event, 4)"
    />
  </div>
</template>
<script>
import moment from "moment";
export default {
  model: {
    prop: "value",
    event: "input",
  },
  props: {
    allowClear: {
      type: Boolean,
      default: false,
    },
    //是否禁用
    disabled: {
      type: Boolean,
      default: false,
    },
    //类型 1年  2月  3周
    type: {
      type: [String, Number],
      default: "1",
    },
    value: {
      type: [String, Number],
      default: "",
    },
  },
  data() {
    return {
      isopen: false,
    };
  },
  mounted() {},
  methods: {
    handleChange(ev, type) {
      if (type == 1) {
        this.$emit("update:value", "");
      } else {
        this.$emit("update:value", ev);
      }
    },

    // 选择年
    yearPick(e) {
      this.$emit("update:value", moment(e).format("YYYY"));
      this.isopen = false;
    },

    // 选择年后，关闭弹窗
    yearStatus(status) {
      if (status) {
        this.isopen = true;
      } else {
        this.isopen = false;
      }
    },
  },
};
</script>
